<template>
<div :class="{ 'isLooking': isLooking,'supervision_pag':true } ">
    <!--新建干部任免审批表-->
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <div class="contentBox">
        <!--标题-->
        <Table-title :title="this.$route.query.archiveName || ruleForm.archiveName"></Table-title>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!--基本信息-->
            <div class="people-detail-box">
                <h1 class="Basics-title">
                    <h2>基本信息</h2>
                    <div class="button-group-right" v-if="!isLooking">
                        <el-button type="edit" v-if="nameDisabled" @click="nameDisabled=false">编辑</el-button>
                        <div v-else class="buttom-group">
                            <el-button type="cancel" @click="cancel">取消</el-button>
                            <el-button type="save" @click="nameDisabled=true">保存并更新</el-button>
                        </div>
                    </div>
                </h1>
                <!--基本信息表格区域-->
                <div class="people-detail">
                    <table border bordercolor="#E8E8E8">
                        <tr>
                            <td class="table-lable">姓名</td>
                            <td class="table-input">
                                <el-form-item prop="personName">
                                    <el-input v-model="ruleForm.personName" placeholder="请输入姓名" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                            <td class="table-lable">性别</td>
                            <td class="table-input">
                                <el-form-item prop="sex">
                                    <el-select v-model="ruleForm.sex" placeholder="请选择性别" :disabled="nameDisabled">
                                        <el-option v-for="item in Genderoptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </td>
                            <td class="table-lable">出生年月</td>
                            <td class="table-input">
                                <el-form-item prop="birthTime">
                                    <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.birthTime" type="date" placeholder="年/月/日" :disabled="nameDisabled"></el-date-picker>
                                </el-form-item>
                            </td>
                            <!--头像上传区域-->
                            <td rowspan="5" class="upload-td">
                                <div class="upload-pic-box">
                                    <div class="upload-pic">
                                        <img src="@/assets/image/dog.png" alt />
                                    </div>
                                    <div class="but-group">
                                        <el-upload class="upload-demo" action="#" :http-request="httpRequest" :limit="1" :show-file-list="false" :file-list="fileList" list-type="picture">
                                            <el-button size="small" type="primary">修改</el-button>
                                        </el-upload>
                                        <el-button size="small" type="primary">删除</el-button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">民族</td>
                            <td class="table-input">
                                <el-form-item prop="nation">
                                    <el-input v-model="ruleForm.nation" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                            <td class="table-lable">籍贯</td>
                            <td class="table-input">
                                <el-form-item prop="nativePlace">
                                    <el-input v-model="ruleForm.nativePlace" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                            <td class="table-lable">出生地</td>
                            <td class="table-input">
                                <el-form-item prop="birthPlace">
                                    <el-input v-model="ruleForm.birthPlace" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">入党时间</td>
                            <td class="table-input">
                                <el-form-item prop="joinPartyTime">
                                    <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.joinPartyTime" type="date" placeholder="年/月/日" :disabled="nameDisabled"></el-date-picker>
                                </el-form-item>
                            </td>
                            <td class="table-lable">参加工作时间</td>
                            <td class="table-input">
                                <el-form-item prop="joinWorkTime">
                                    <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.joinWorkTime" type="date" placeholder="年/月/日" :disabled="nameDisabled"></el-date-picker>
                                </el-form-item>
                            </td>
                            <td class="table-lable">健康状况</td>
                            <td class="table-input">
                                <el-form-item prop="healthState">
                                    <el-input v-model="ruleForm.healthState" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">专业技能</td>
                            <td class="table-input">
                                <el-form-item prop="professionalSkills">
                                    <el-input v-model="ruleForm.professionalSkills" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                            <td class="table-lable">熟悉专业</td>
                            <td class="table-input" colspan="3">
                                <el-form-item prop="familiarMajor">
                                    <el-input v-model="ruleForm.familiarMajor" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">全日制</td>
                            <td class="table-input">
                                <el-form-item prop="fullTime">
                                    <el-input v-model="ruleForm.fullTime" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                            <td class="table-lable">毕业院校</td>
                            <td class="table-input" colspan="4">
                                <el-form-item prop="fullTimeSchool">
                                    <el-input v-model="ruleForm.fullTimeSchool" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">在职</td>
                            <td class="table-input">
                                <el-form-item prop="onTheJob">
                                    <el-input v-model="ruleForm.onTheJob" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                            <td class="table-lable">毕业院校</td>
                            <td class="table-input" colspan="4">
                                <el-form-item prop="onTheJobSchool">
                                    <el-input v-model="ruleForm.onTheJobSchool" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">现任职务</td>
                            <td class="table-input" colspan="6">
                                <el-form-item prop="currentPost">
                                    <el-input v-model="ruleForm.currentPost" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">拟任职务</td>
                            <td class="table-input" colspan="6">
                                <el-form-item prop="proposedPost">
                                    <el-input v-model="ruleForm.proposedPost" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">拟免职务</td>
                            <td class="table-input" colspan="6">
                                <el-form-item prop="removedPost">
                                    <el-input v-model="ruleForm.removedPost" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">简历</td>
                            <td class="table-input" colspan="6">
                                <el-form-item prop="cv">
                                    <el-input type="textarea" placeholder="请输入内容" v-model="ruleForm.cv" maxlength="200" show-word-limit :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">奖励情况</td>
                            <td class="table-input" colspan="6">
                                <el-form-item prop="rewardAndPunishment">
                                    <el-input v-model="ruleForm.rewardAndPunishment" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">年度考核结果</td>
                            <td class="table-input" colspan="6">
                                <el-form-item prop="assessResult">
                                    <el-input v-model="ruleForm.assessResult" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">培训情况</td>
                            <td class="table-input" colspan="6">
                                <el-form-item prop="training">
                                    <el-input v-model="ruleForm.training" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">任免理由</td>
                            <td class="table-input" colspan="6">
                                <el-form-item prop="reason">
                                    <el-input v-model="ruleForm.reason" placeholder="请输入" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--家庭成员及社会关系
      <Table-list WatchOne="8" lable="家庭成员及社会关系"></Table-list>-->
            <div class="build-ID-box">
                <h1 class="Basics-title">
                    <h2>家庭成员及社会关系</h2>
                    <div class="button-group-right" v-if="!isLooking">
                        <el-button type="edit" @click="educationBuild">新建</el-button>
                    </div>
                </h1>
                <div class="education-list-box">
                    <div class="lable" v-if="!isEducationTable">暂无家庭成员及社会关系</div>
                    <!--表格到此===开始-->
                    <el-table :data="ruleForm.familyRelation" style="width: 100%" border v-if="isEducationTable">
                        <!--家庭成员及社会关系-->
                        <el-table-column prop="date" label="称谓" align="center">
                            <template slot-scope="scope">
                                <el-form-item :prop="'familyRelation.'+scope.$index+'.elationType'" :rules="rules.elationType">
                                    <el-input v-model="scope.row.elationType" placeholder="请输入内容" :disabled="scope.row.isEdit"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="姓名" align="center">
                            <template slot-scope="scope">
                                <el-form-item :prop="'familyRelation.'+scope.$index+'.name'" :rules="rules.name">
                                    <el-input v-model="scope.row.name" placeholder="请输入内容" :disabled="scope.row.isEdit"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="年龄" align="center">
                            <template slot-scope="scope">
                                <el-form-item :prop="'familyRelation.'+scope.$index+'.age'" :rules="rules.age">
                                    <el-input v-model="scope.row.age" placeholder="请输入内容" :disabled="scope.row.isEdit"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="政治面貌" align="center">
                            <template slot-scope="scope">
                                <el-form-item :prop="'familyRelation.'+scope.$index+'.politicalOutlook'" :rules="rules.politicalOutlook">
                                    <el-input v-model="scope.row.politicalOutlook" placeholder="请输入内容" :disabled="scope.row.isEdit"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="工作单位及职务" align="center">
                            <template slot-scope="scope">
                                <el-form-item :prop="'familyRelation.'+scope.$index+'.companyOrSchool'" :rules="rules.companyOrSchool">
                                    <el-input v-model="scope.row.companyOrSchool" placeholder="请输入内容" :disabled="scope.row.isEdit"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <!--按钮操作区域-->
                        <el-table-column prop="address" label="操作" align="center" width="153">
                            <template slot-scope="scope">
                                <div v-if="!isLooking">
                                    <el-button type="text" size="small" @click="EducationEdit(scope.$index,scope.row)" v-if="scope.row.isEdit">编辑</el-button>
                                    <el-button type="text" size="small" @click="EducationSave(scope.$index,scope.row)" v-else>保存</el-button>
                                    <el-button type="text" size="small" @click="EducationRemove(scope.$index,scope.row)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--表格到此===结束-->
                </div>
            </div>
            <!--意见-->
            <div class="people-detail-box">
                <h1 class="Basics-title">
                    <h2>意见</h2>
                    <div class="button-group-right" v-if="!isLooking">
                        <el-button type="edit" v-if="idDisabled" @click="idDisabled=false">编辑</el-button>
                        <div v-else class="buttom-group">
                            <el-button type="cancel" @click="cancelBasics">取消</el-button>
                            <el-button type="save" @click="idDisabled=true">保存并更新</el-button>
                        </div>
                    </div>
                </h1>
                <div class="people-detail border-bottom-20">
                    <table border bordercolor="#E8E8E8">
                        <tr>
                            <td class="table-lable width-200">呈报或提议单位意见</td>
                            <td class="table-input">
                                <el-form-item prop="opinion1">
                                    <el-input v-model="ruleForm.opinion1" placeholder="请输入" :disabled="idDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable width-200">试任职审批机关意见</td>
                            <td class="table-input">
                                <el-form-item prop="opinion2">
                                    <el-input v-model="ruleForm.opinion2" placeholder="请输入" :disabled="idDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable width-200">试任职行政任免机关意见</td>
                            <td class="table-input">
                                <el-form-item prop="opinion3">
                                    <el-input v-model="ruleForm.opinion3" placeholder="请输入" :disabled="idDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable width-200">正式任职审批机关意见</td>
                            <td class="table-input">
                                <el-form-item prop="opinion4">
                                    <el-input v-model="ruleForm.opinion4" placeholder="请输入" :disabled="idDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable width-200">正式任职行政任免机关意见</td>
                            <td class="table-input">
                                <el-form-item prop="opinion5">
                                    <el-input v-model="ruleForm.opinion5" placeholder="请输入" :disabled="idDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="operation-people">
                    <div class="lable">填表人：</div>
                    <el-form-item prop="filledBy">
                        <el-input v-model="ruleForm.filledBy" placeholder="请输入" :disabled="idDisabled"></el-input>
                    </el-form-item>
                </div>
            </div>
            <!--附件-->
            <Attachment-upload :attachList.sync="ruleForm.attachList" :detailBtIsLook="!isLooking"></Attachment-upload>
            <!--吸底按钮-->
            <!--底部的提交按钮=开始-->
            <div class="height-50" v-if="!isLooking"></div>
            <div class="bu-bottom" v-if="!isLooking">
                <el-button type="cancel" @click="resetForm('ruleForm')">取消</el-button>
                <el-button type="confirm" @click="submitForm('ruleForm')">提交</el-button>
            </div>
        </el-form>
    </div>
</div>
</template>

<script>
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
import TableList from "@/components/IncorruptibleArchives/TableList.vue";
import AttachmentUpload from "@/components/IncorruptibleArchives/AttachmentUpload.vue";
import ConfirmButton from "@/components/IncorruptibleArchives/ConfirmButton.vue";
//  标题
import TableTitle from "@/components/IncorruptibleArchives/TableTitle.vue";
export default {
    components: {
        Breadcrumb,
        TableList,
        AttachmentUpload,
        ConfirmButton,
        TableTitle,
    },
    data() {
        //定义身份证的规则
        var validateNameID = (rule, value, callback) => {
            var uPattern =
                /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/ ||
                /^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}$/;
            let res = uPattern.test(value);
            if (value === "") {
                callback(new Error("身份证号不能为空"));
            } else if (!res) {
                callback(new Error("请输入正确的身份证号"));
            } else {
                callback();
            }
        };
        return {
            isLooking: false,
            detailBtIsLook: true,
            isEducationTable: false,
            //控制第一行的输入
            detailpersion: true,
            //标题传输的文字
            TableTitle: this.$route.query.archiveName,
            textarea: "",
            valueTimeFromTo: "",
            isPeopleDetail: true,
            fileList: [],
            value1: "",
            isTrue: true,
            isIDTrue: true,
            idDisabled: true,
            nameDisabled: false,
            userid: "",
            ruleForm: {
                familyRelation: [],
                attachList: [],
                personId: this.$route.query.id,
                year: this.$route.query.year,
                archiveName: this.$route.query.archiveName,
            },
            Genderoptions: [{
                    value: "男",
                    label: "男",
                },
                {
                    value: "女",
                    label: "女",
                },
            ],
            //面包靴跳转数据
            Breadcrumb: [{
                    name: "廉政档案",
                    link: "IncorruptibleArchives",
                },
                {
                    name: "监督对象",
                    link: "supervise",
                },
                {
                    name: "监督对象详情",
                    link: "supervisedetail",
                },
                {
                    name: "编辑档案",
                    link: "",
                },
            ],
            rules: {
                personName: [{
                    required: true,
                    validator: validateNameID,
                    trigger: "blur",
                }, ],
                personName: [{
                    required: true,
                    trigger: "blur",
                }, ],
                sex: [{
                    required: true,
                    trigger: "blur",
                }, ],
                birthTime: [{
                    required: true,
                    trigger: "blur",
                }, ],
                nation: [{
                    required: true,
                    trigger: "blur",
                }, ],
                nativePlace: [{
                    required: true,
                    trigger: "blur",
                }, ],
                birthPlace: [{
                    required: true,
                    trigger: "blur",
                }, ],
                joinPartyTime: [{
                    required: true,
                    trigger: "blur",
                }, ],
                joinWorkTime: [{
                    required: true,
                    trigger: "blur",
                }, ],
                healthState: [{
                    required: true,
                    trigger: "blur",
                }, ],
                professionalSkills: [{
                    required: true,
                    trigger: "blur",
                }, ],
                familiarMajor: [{
                    required: true,
                    trigger: "blur",
                }, ],
                fullTime: [{
                    required: true,
                    trigger: "blur",
                }, ],
                fullTimeSchool: [{
                    required: true,
                    trigger: "blur",
                }, ],
                onTheJob: [{
                    required: true,
                    trigger: "blur",
                }, ],
                onTheJobSchool: [{
                    required: true,
                    trigger: "blur",
                }, ],
                currentPost: [{
                    required: true,
                    trigger: "blur",
                }, ],
                proposedPost: [{
                    required: true,
                    trigger: "blur",
                }, ],
                removedPost: [{
                    required: true,
                    trigger: "blur",
                }, ],
                cv: [{
                    required: true,
                    trigger: "blur",
                }, ],
                rewardAndPunishment: [{
                    required: true,
                    trigger: "blur",
                }, ],
                assessResult: [{
                    required: true,
                    trigger: "blur",
                }, ],
                training: [{
                    required: true,
                    trigger: "blur",
                }, ],
                reason: [{
                    required: true,
                    trigger: "blur",
                }, ],
                name: [{
                    required: true,
                    trigger: "blur",
                }, ],
                elationType: [{
                    required: true,
                    trigger: "blur",
                }, ],
                age: [{
                    required: true,
                    trigger: "blur",
                }, ],
                opinion1: [{
                    required: true,
                    trigger: "blur",
                }, ],
                opinion2: [{
                    required: true,
                    trigger: "blur",
                }, ],
                opinion3: [{
                    required: true,
                    trigger: "blur",
                }, ],
                opinion4: [{
                    required: true,
                    trigger: "blur",
                }, ],
                opinion5: [{
                    required: true,
                    trigger: "blur",
                }, ],
                filledBy: [{
                    required: true,
                    trigger: "blur",
                }, ],
            },
        };
    },
    created() {
        this.getDetail();
    },
    methods: {
        //获取干部任免审批表的具体详情
        getDetail() {
            if (this.$route.query.isBuildEditLook == 3) {
                this.nameDisabled = true;
                this.isLooking = true;
            }
            if (
                this.$route.query.isBuildEditLook == 2 ||
                this.$route.query.isBuildEditLook == 3
            ) {
                this.Api.getSuperviseRmspbDetail({
                    id: this.$route.query.id,
                }).then((res) => {
                    console.log(res, "获取干部任免审批表的具体详情");
                    if (res && res.code === "0") {
                        this.ruleForm = res.data;
                        this.isEducationTable = true;
                        if (
                            this.ruleForm.familyRelation &&
                            this.ruleForm.familyRelation.length > 0
                        ) {
                            this.ruleForm.familyRelation.map((item) => {
                                this.$set(item, "isEdit", true);
                            });
                        }
                    } else {
                        this.$message.error(res.message);
                    }
                });
            }
        },
        submitForm(formName) {
            // console.log(this.ruleForm, "ruleForm");
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //通过后准备请求的数据
                    // 请求新建的接口
                    // type是1说明是监督对象的新建2就是检查对象的新建
                    if (this.$route.query.type === "1") {
                        if (this.$route.query.isBuildEditLook == 1) {
                            //1是新建
                            this.Api.getSuperviseRmspbAdd(this.ruleForm).then((res) => {
                                console.log(res, "新建提交");
                                if (res.code === "0") {
                                    this.$router.push({
                                        name: "supervisedetail",
                                        query: {
                                            id: this.$route.query.id,
                                            type: this.$route.query.type,
                                        },
                                    });
                                } else {
                                    this.$message.error(res.message);
                                }
                            });
                        } else if (this.$route.query.isBuildEditLook == 2) {
                            //2是编辑
                            this.Api.getSuperviseRmspbEdit(this.ruleForm).then((res) => {
                                console.log(res, "编辑提交");
                                if (res && res.code === "0") {
                                    this.$message.success("提交成功");
                                    this.$router.push({
                                        name: "supervisedetail",
                                        query: {
                                            id: this.ruleForm.personId,
                                            type: this.$route.query.type,
                                        },
                                    });
                                } else {
                                    this.$message.error(res.message);
                                }
                            });
                        }
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        //重置表单验证---并清空数据
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //取消按钮id
        cancel() {
            this.nameDisabled = true;
        },
        httpRequest() {
            console.log("httpRequest");
            return;
        },
        cancelBasics() {
            this.idDisabled = true;
        },
        //家庭成员关系的新建
        educationBuild() {
            this.isEducationTable = true;
            this.ruleForm.familyRelation.push({
                isEdit: false,
            });
        },
        EducationEdit(index, row) {
            row.isEdit = false;

        },
        EducationSave(index, row) {
            // row.isEdit = true;
            this.ruleForm.familyRelation[index].isEdit = true
        },
        EducationRemove(index) {
            this.ruleForm.familyRelation.splice(index, 1);
        },
    },
};
</script>

<style lang="less" scoped>
.people-detail-box {
    padding: 20px;
    background-color: rgba(255, 255, 255, 1);
    margin-bottom: 10px;

    .people-detail {
        table {
            width: 100%;

            .table-lable {
                width: 8%;
                height: 46px;
                background: rgba(250, 250, 250, 1);
                font-size: 14px;
                font-weight: 600;
                color: rgba(51, 51, 51, 1);
                line-height: 21px;
                padding: 0 0 0 10px;
            }

            .table-input {
                padding: 0 10px;
            }

            .el-input {
                border-radius: 2px;

                .el-input__inner {
                    height: 36px;
                }
            }

            .el-select {
                width: 100%;
            }

            .NativePlace {
                // width: 100%;

                .el-select {
                    width: 32.8%;
                    float: left;
                    margin-right: 10px;
                }

                >.el-input {
                    width: 32.5%;
                    float: left;
                    margin-right: 10px;
                }
            }

            .NativePlace .el-input:last-child {
                margin-right: 0px;
            }

            .el-date-editor {
                width: 100%;

                .el-input__inner {
                    padding-left: 18px;
                }

                .el-input__prefix {
                    left: 91%;
                    top: -5%;
                }
            }

            /deep/.now-load {
                // width: 100%;
                // display: flex;
                .el-select {
                    width: 40.5%;
                    float: left;
                    margin-right: 10px;
                }

                >.el-input {
                    float: left;
                    width: 57%;
                }
            }
        }
    }
}

//表头标签
.Basics-title {
    padding: 0 0 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    background-color: white;

    >h2 {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        border-left: 4px solid #3d7fff;
        padding: 0 0 0 10px;
    }

    //编辑按钮的样式
    .el-button--edit {
        width: 70px;
        height: 30px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(61, 127, 255, 1);
        padding: 0;
        color: #3d7fff;
    }
}

//取消和保存按钮的样式
.buttom-group {
    .el-button--cancel {
        width: 70px;
        height: 30px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(61, 127, 255, 1);
        padding: 0;
        font-size: 14px;
        font-weight: 500;
        color: rgba(61, 127, 255, 1);
        line-height: 22px;
    }

    .el-button--save {
        width: 90px;
        height: 30px;
        background: rgba(61, 127, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(61, 127, 255, 1);
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
        padding: 0;
    }
}

//图片上传的
/deep/.upload-pic-box {
    width: 100%;
    height: 100%;
    background: rgba(250, 250, 250, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    top: 0;
    right: 0;

    .upload-pic {
        background: rgba(250, 250, 250, 1);
        overflow: hidden;

        img {
            width: 160px;
            height: 159px;
        }
    }

    .but-group {
        display: flex;
        background: #afafaf;
        width: 161px;
        height: 26px;

        .el-button {
            padding: 0 0 0 0;
            border: 0;
            background-color: #afafaf;
        }

        .el-upload {
            height: 26px;

            .el-button {
                margin-top: 7px;
                padding: 0px 7px 0 48px;
                border-right: 1px solid white;
                margin-right: 7px;
            }
        }
    }
}

.upload-td {
    position: relative;
    width: 170px;
}

.width-200 {
    width: 200px !important;
}

.border-bottom-20 {
    padding-bottom: 20px;
    border-bottom: 1px solid #dddddd;
}

.operation-people {
    display: flex;
    align-items: center;
    padding-top: 20px;

    .lable {
        min-width: 56px;
    }

    .el-input {
        width: 236px;
    }
}

/deep/.el-form-item__content {
    margin-left: 0 !important;
    height: 48px;
    width: 100%;
}

.el-form-item {
    margin-bottom: 0;
    height: 40px;
}

//加入表单验证后的样式调整--开始
.el-form-item__error {
    display: none;
}

.el-form-item {
    margin-bottom: 0;
    height: 44px;
    display: flex;
    align-items: center;

    .el-form-item__content {
        margin-left: 0 !important;
        width: 100%;

        .el-input {
            line-height: 36px;
            height: 40px;
        }
    }

    .el-form-item__content::after,
    .el-form-item__content::before {
        content: none;
    }
}

.el-form-item::after,
.el-form-item::before {
    display: inline;
}

//加入表单验证后的样式调整--结束
//教育背景的区域
/deep/.education-list-box {
    .lable {
        font-size: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 14px;
        padding-bottom: 20px;
    }

    //输入框文字居中
    .el-input {
        height: 36px;

        .el-input__inner {
            height: 36px;
            text-align: center;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.85);
        }
    }

    //表格第一行的样式
    .el-table__header-wrapper {
        .el-table__header {
            .has-gutter {
                tr {
                    th {
                        padding: 10px 0;
                        background-color: #fafafa;
                        font-size: 14px;
                        font-weight: 600;
                        color: rgba(0, 0, 0, 0.85);
                        line-height: 21px;
                    }
                }
            }
        }
    }

    //表格body区域样式修改
    .el-table__body-wrapper {
        .el-table__body {
            tbody {
                .el-table__row {
                    td {
                        padding: 4.5px 0;
                    }
                }
            }
        }
    }
}

//表头标签
.Basics-title {
    padding: 0 0 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    background-color: white;

    >h2 {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 16px;
        border-left: 4px solid #3d7fff;
        padding: 0 0 0 10px;
    }

    //编辑按钮的样式
    .el-button--edit {
        width: 70px;
        height: 30px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(61, 127, 255, 1);
        padding: 0;
        color: #3d7fff;
    }
}

.build-ID-box {
    padding: 20px;
    background-color: rgba(255, 255, 255, 1);
    margin-bottom: 10px;
}

//表单校验时的样式
/deep/.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input__inner:focus,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-textarea__inner:focus,
.el-message-box__input input.invalid,
.el-message-box__input input.invalid:focus {
    border-color: #f56c6c !important;
}

/deep/.el-form-item__error {
    display: none;
}

/deep/ .el-form-item__content {
    margin-left: 0 !important;
}

.el-input {
    width: 100%;
}

.el-form-item {
    margin-bottom: 0;
}

/deep/.el-input__inner {
    width: 100%;
}

//底部确认按钮的样式
.bu-bottom {
    margin-top: 20px;
    width: calc(100% - 215px);
    height: 56px;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 200px;
    padding-right: 20px;

    .el-button--cancel {
        width: 70px;
        height: 36px;
        background: rgba(255, 255, 255, 1);
        border-radius: 3px;
        border: 1px solid rgba(215, 219, 224, 1);
        padding: 0;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
        margin-right: 10px;
    }

    .el-button--confirm {
        width: 70px;
        height: 36px;
        background: rgba(61, 127, 255, 1);
        border-radius: 3px;
        border: 1px solid rgba(215, 219, 224, 1);
        padding: 0;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
        margin-right: 10px;
    }
}

.height-50 {
    height: 60px;
}

.isLooking {
    /deep/.el-input__inner {
        background-color: white;
        border: 0;
        color: #333;
    }

    /deep/.el-textarea__inner {
        border: 0;
        background-color: white;
        color: #333;
    }

    /deep/i {
        display: none;
    }
}

.supervision_pag {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .contentBox {
        width: 100%;
        height: calc(100% - 56px);
        overflow: auto;
    }
}
</style>
